<template>
  <el-tag :color="rgba1" :style="{ border: `1px solid ${rgba2}` }" round>
    <template #default>
      <span :style="{ color: props.color }">{{ props.name }}</span>
    </template>
  </el-tag>
</template>

<script lang="ts" setup>
import hexToRgb from "@/utils/colorTransform";
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "",
  },
});

const rgb = ref({
  r: 0,
  g: 0,
  b: 0,
});
const rgba1 = computed(() => {
  return `rgba(${rgb.value.r},${rgb.value.g},${rgb.value.b},0.2)`;
});
const rgba2 = computed(() => {
  return `rgba(${rgb.value.r},${rgb.value.g},${rgb.value.b},0.3)`;
});

onMounted(() => {
  rgb.value = hexToRgb(props.color);
});
</script>
